<template>
  <div>
    <el-dialog
      ref="drawer1"
      title="设置岗位角色"
      :visible.sync="drawer1"
      close-on-press-escape
      destroy-on-close
    >
      <div class="draw-body">
        <el-form
          ref="ruleForm1"
          :model="obj"
          :rules="rules"
          :validate-on-rule-change="false"
          label-width="100px"
          label-suffix=":"
        >
          <el-form-item label="设置岗位" prop="professionIds">
            <el-transfer
              v-model="obj.professionIds"
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入岗位名称"
              :titles="['岗位', '赋予岗位']"
              :data="professionList"
              :props="{ key: 'id', label: 'name' }"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="settingSubmitForm('ruleForm1')"
              >确定</el-button
            >
            <el-button @click="resetForm('ruleForm1')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { postHandle } from "@/api";
export default {
  data() {
    return {
      drawer1: false,
      id: "",
      professionList: [],
      obj: {
        professionIds: [],
      },
      rules: {},
    };
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId;
    },
  },
  methods: {
    settingHandle(row) {
      this.drawer1 = true;
      this.id = row.spaceMemberInfo.id;
      if (row.professionList && row.professionList.length > 0) {
        this.obj.professionIds = row.professionList.map(
          (item) => item.professionId
        );
      } else {
        this.obj.professionIds = [];
      }
      this.getJobList();
    },

    filterMethod(query, item) {
      return item.name.indexOf(query) > -1;
    },

    getJobList() {
      const req = {
        d: {
          filters: [
            {
              field: "proSpaceId",
              operator: "EQUALS",
              value: this.spaceId,
            },
          ],
          fields: [],
          page: {
            p: 1,
            ps: 9999,
          },
        },
      };
      postHandle("/api/v1/welder-uac-second/base-profession-comb/list", req).then(
        (response) => {
          this.professionList = response.result;
        }
      );
    },

    settingSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          postHandle(
            `/api/v1/welder-uac-second/space-organization-member-comb/configure-member-privilege/${this.id}`,
            { obj: this.obj }
          )
            .then((response) => {
              this.$emit("getList");
              this.drawer1 = false;
            })
            .catch((error) => {
              this.loading = false;
              const data = error.response.data;
              for (const key in data) {
                this.$message.error(this.$t(data[key]));
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>